<template>
	<view :style="'height:'+height+'px'">


		<u-row class="top">
			<u-col span="10">
				<image :style="'transform: rotate('+roate+'deg);top:'+top+'rpx;border-radius:'+borderRadius+'% '+borderRadius+'% 55% 55%'" src="../../static/start/background.jpg"></image>
			</u-col>
		</u-row>

		<u-row class="bottom">
			<u-col span="10">
				<image style="border-radius:55% 55% 0 0;" src="../../static/start/background.jpg"></image>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	let data = {
		height: 0,
		borderRadius: 0,
		top:0,
		rotate:180
	};
	export default {
		data() {
			return data;
		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					data.height = res.windowHeight;
				}
			});

			function p1() {
				var p=setInterval(function() {
					data.borderRadius++;
					if(data.borderRadius==25){
						p2();
					}
					if(data.borderRadius>=55){
						clearInterval(p);
					}
				}, 20);
			}
			function p2(){
				var p=setInterval(function(){
					data.top++;
					if(data.top>=250){
						p3();
						clearInterval(p);
					}
				},15);
			}
			function p3(){
				var p=setInterval(function(){
					data.top++;
					if(data.top>=250){
						clearInterval(p);
					}
				},15);
			}
			
			p1()
		},
		methods: {}
	}
</script>

<style lang="scss">
	.body {
		width: 100%;
		background-image: linear-gradient($global-color-opacity, $global-color);
	}


	.top {
		position: fixed;
		width: 100%;
		text-align: center;
		image {
			width: 500rpx;
			height: 500rpx;
			margin-left: 125rpx;
		}
	}


	.bottom {
		position: fixed;
		width: 100%;
		bottom: -8rpx;
		margin: 0;
		text-align: center;

		image {
			width: 500rpx;
			height: 500rpx;
			margin-left: 125rpx;
		}
	}
</style>
